import React, { Component } from 'react'
import { connect } from "react-redux"
// connect 是一个高阶组件，用于帮组我们获取store中的数据，并且这个 connect 还可以帮组我们更新界面
import { actions } from "./model";
import { bindActionCreators } from "redux";
import { Button } from "antd"

class index extends Component {
    state = {
        val: ''
    }

    renderTodos = () => {
        const { todos, delTodos } = this.props
        if(todos.length === 0) return <div> 数据为空 </div>
        return todos.map((item, index) => <li key={item.id}> 
            <h3>{item.task}</h3> 
            <div>
                <Button onClick={() => {delTodos(index)}} type='danger' >删除</Button>
            </div>
            <h3>{item.flag? '已完成' : '未完成'}</h3> 
        </li>)
    }

    addTodo = (e) => {
        const { addTodos } = this.props
        const { val } = this.state
        if(e.keyCode == 13) {
            // 回车事件
            // 添加操作  ---  redux流程  -- action -> reducer
            addTodos(val)
            this.setState({
                val: ''
            })
        }
    }
  render() {
      const { val } = this.state
    return (
      <div>
          <input onKeyDown={this.addTodo} type="text" value={val} onChange={(e) => {this.setState({val: e.target.value})}} />

          <ul>
            { this.renderTodos() }
          </ul>
      </div>
    )
  }
}
function mapStateFromProps(state) {  //  遍历所有的 state，将state转为当前组件的props
    // state 是所有的数据   合并
    return state.todosStore  // 就是分发  拿到 自己的 todo的值
}
function mapDispatchFromProps(dispath) {
    // 1. 帮助我们发送 actions 中的 action
    // 2. 帮助我们将actions中的方法绑定在我们的组件身上，成为props属性
    return bindActionCreators(actions, dispath)
}
export default connect(mapStateFromProps, mapDispatchFromProps)(index)